<template>
	<view>
		<u-navbar
			:autoBack="true"
			:is-fixed="false"
		>
			<view slot="center" class="nav-center">
				{{title}}
			</view>
			<view slot="right" class="nav-right">
				<u-icon name="search" size="22" @click="search"></u-icon>
				<u-icon name="shopping-cart" size="22"></u-icon>
			</view>
		</u-navbar>
		<view class="filter">
			<view class="filter-item" 
			v-for="item in filterList" :key="item.id"
			:class="item.id==current?'active':''"
			@click="changeTabs(item.id)"
			>
				{{item.name}}
			</view>
		</view>
		<view class="re-lo">
			<scroll-view scroll-y="true" :style="'height:'+height+'px;'" @scrolltolower="lower">
				<view class="new-list" v-if="courseList.length > 0"> 
					<view class="new-list-item"
					v-for="item in courseList"
					:key="item.id"
					>
						<view class="new-item-img">
							<image :src="item.courseCover" ></image>
						</view>
						<view class="new-item-main">
							<view class="new-item-title">
								{{item.courseName}}
							</view>
							<view class="new-item-type">
								{{courseType(item.courseLevel)}}
							</view>
							<view class="new-item-total">
								<view class="new-item-price" v-if="item.discountPrice==0">
									<view class="">
										免费
									</view>
								</view>
								<view class="new-item-price" v-else>
									<view class="">
										限时优惠
									</view>
									<view class="new-item-discountPrice">
										￥ {{item.discountPrice}}
									</view>
								</view>
								<view class="new-item-number">
									{{item.clicks}}人学习
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					暂无数据
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {searchCourse} from '@/api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				title:'',
				filterList: [
					{id:0,name:'综合'},
					{id:1,name:'最新课程'},
					{id:2,name:'浏览最多'}
				],
				current:0,
				courseList: [],
				courseParam: {
					pageNum:1,
					pageSize:10,
					entity:{
						sortBy:"",
						courseName:''
					},
				},
				height:0,
				isTabs:false
			}
		},
		onLoad(e) {
			this.title = e.key
			this.courseParam.entity.courseName = e.key
			this.getCourse()
		},
		onReady() {
			this.height = this.getHeigh('.u-navbar--fixed','.filter') + 30
		},
		methods: {
			changeTabs(id){
				this.current = id
				this.isTabs = true
				this.courseParam.pageNum = 1
				
				switch(id){
					case 0:
						this.courseParam.sortBy = ''
					break
					case 1:
						this.courseParam.sortBy = 'time-desc'
					break
					case 2:
						this.courseParam.sortBy = 'clicks-desc'
					break
				}
				this.getCourse()
			},
			getCourse(){
				searchCourse(this.courseParam).then(res=>{
					if(this.isTabs){
						this.courseList = res.pageInfo.list
					}else{
						this.courseList = [...this.courseList,...res.pageInfo.list]
					}
					
				})
			},
			// 触底事件
			lower(){
				this.isTabs = false
				this.courseParam.pageNum++
				this.getCourse()
			},
			// 进入搜索页
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		}
	}
</script>

<style>
.nav-center{
	font-size: 38rpx;
}
.nav-right{
	display: flex;
}
.filter{
	display: flex;
	justify-content: space-between;
	padding-top: 108rpx;
}
.filter-item{
	padding: 0 33rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A0A0;
}
.filter-item.active{
	/* font-size: 26rpx; */
	font-weight: 400;
	/* line-height: 35rpx; */
	color: #0648FF;
}
.re-lo{
	padding: 14rpx;
}
.new-title-more{
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
}

.new-list-item:after{
	content: '';	
	position: absolute;
	bottom: -20rpx;
	margin-top: 40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color:#ccc;
}
.new-list-item image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex: 1;
	display: flex;
    flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left: 23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #c5c5c5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	font-weight: 600;
	color: #FF4B5C;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left: 21rpx;
}
/deep/ ::-webkit-scrollbar{
	display: block;
	width: 0px !important;
	height: 0px !important;
}
</style>
